import React, { Component } from 'react'
import { Modal } from 'antd';
export default class LazyLd extends Component {
  constructor() {
    super();
    this.state = {
      done: false,
      visible: false,
      src: ''
    }
  }
  componentWillUnmount () {
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  componentDidMount () {
    // 创建一个虚拟图片
    const img = new Image();
    // 发出请求，请求图片
    img.src = this.props.src;
    // 当图片加载完毕
    img.onload = () => {
      this.setState({
        done: true
      });
    }
  }
  // 点击图片的函数
  clickImg = (src) => {
    this.setState({
      visible: true,
      src
    });
  }

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  render () {
    return (
      <div>
        <Modal
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
          className='pictrueImgModal'
          getContainer={() => document.getElementById('PictureId')}
          centered={true}
        >
          <div className='pictrueImgModal_body'>
            <div className='pictrueImgModal_body_img'>
              <img src={this.state.src} alt="展示图" />
            </div>
            <div className='pictrueImgModal_body_ke'></div>
          </div>
        </Modal>
        {
          this.state.done
            ?
            <img style={{
              'width': this.props.width + 'vw'
            }} src={this.props.src} alt='壁纸' onClick={() => this.clickImg(this.props.src)} />
            :
            <img style={{
              'width': this.props.width + 'vw'
            }} src="" alt='占位符' />
        }
      </div>
    )
  }
}